<template>
  <a-card :loading="loading" style="border-radius: 10px;max-width: 930px;box-shadow:4px 4px 8px #d3d2d2"
          :bordered="false">
    <template #title>
      <div style="font-size: 18px;color: #535353;">
        <h2>{{ essay.title }}</h2>
      </div>
      <div style="padding: 10px 30px 10px;background-color: #f7f7f7;color: #9d9d9d;">
        <calendar-filled/>
        发布于 {{ essay.datetime }} &nbsp;|&nbsp;<br v-if="overflowed"/>
        <clock-circle-filled/>
        更新于 {{ essay.update }} &nbsp;|&nbsp;<br v-if="overflowed"/>
        <eye-filled/>
        浏览量 {{ view }} <br/>
        <folder-open-filled/>
        <span style="cursor: pointer" @click="handleClickCategory(essay.category)">
        <a-button style="color: #9d9d9d;font-size: 17px" type="text">{{ essay.category }}</a-button><right-outlined/>&nbsp;
        </span><br v-if="overflowed"/>
        <tag-filled/>
        <span v-for="(item,index) in labelSet"
              :key="index"
              @click="handleClickTag(item)"
        >
          <a-button style="color: #9d9d9d;font-size: 17px" type="text"> {{ item }}</a-button>
          </span>
      </div>
    </template>
    <div style="margin: -20px -20px -20px">
      <!--        <EssayPreview/>-->
      <v-md-editor :model-value="essay.content" mode="preview" ref="preview"/>
    </div>
  </a-card>
<!--  <div id="SOHUCS" :sid="essay.essayId" ></div>-->
</template>

<script setup>
import {
  CalendarFilled,
  ClockCircleFilled,
  EyeFilled,
  FolderOpenFilled,
  TagFilled,
  RightOutlined
} from '@ant-design/icons-vue'
import {ref, watchEffect} from "vue";
import request from "@/utils/request";
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import {useRouter} from "vue-router";


const essay = ref({})
const titles = ref([])
const preview = ref()
const route = useRoute()
const store = useStore()
const view = ref()
const loading = ref(false)
const labelSet = ref([])
const router = useRouter()
const overflowed = ref(false)
const screenWidth = ref(document.body.clientWidth)

watchEffect(async () => {
  windowOnresize()

  // store.commit("setCurrentEssayId",route.params.essayId)
  request.get("essay/getlabel/" + route.params.essayId).then(res => {
    console.log("essayLabel  :", res.data)
    labelSet.value = res.data
  })

  await request.get("essay/addview/" + route.params.essayId).then(res => {
    console.log("view  :", res.data)
    view.value = res.data
  })
  await request.get("essay/get/" + route.params.essayId).then(res => {
    console.log(res)
    essay.value = res.data
  })

  const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
  const ititles = Array.from(anchors).filter((title) => !!title.innerText.trim());
  if (!ititles.length)
    titles.value = [];
  else {
    const hTags = Array.from(new Set(ititles.map((title) => title.tagName))).sort();
    titles.value = ititles.map((el) => ({
      title: el.innerText,
      lineIndex: el.getAttribute('data-v-md-line'),
      indent: hTags.indexOf(el.tagName),
    }))
    console.log("loading.value  :", loading.value)
    loading.value = false
    store.commit("setDirectoryContent", titles.value)
    store.commit("setPreviewRef", preview.value)

  }

})

const handleClickTag = (label) => {

  router.push("/visitor/getList/label/by/" + label)
}

const handleClickCategory = (category) => {

  router.push("/visitor/getList/category/by/" + category)
}

function createComment(screenWidth) {
  (function () {
    var appid = 'cywhVOvru';
    var conf = 'prod_2425b11c84297f70a83e2d04cd0d6df3';
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (!screenWidth) {
      var head = document.getElementsByTagName('head')[0] || document.head || document.documentElement;
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.charset = 'utf-8';
      script.id = 'changyan_mobile_js';
      script.src = 'https://cy-cdn.kuaizhan.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf;
      head.appendChild(script);
    } else {
      var loadJs = function (d, a) {
        var c = document.getElementsByTagName("head")[0] || document.head || document.documentElement;
        var b = document.createElement("script");
        b.setAttribute("type", "text/javascript");
        b.setAttribute("charset", "UTF-8");
        b.setAttribute("src", d);
        if (typeof a === "function") {
          if (window.attachEvent) {
            b.onreadystatechange = function () {
              var e = b.readyState;
              if (e === "loaded" || e === "complete") {
                b.onreadystatechange = null;
                a()
              }
            }
          } else {
            b.onload = a
          }
        }
        c.appendChild(b)
      };
      loadJs("https://cy-cdn.kuaizhan.com/upload/changyan.js", function () {
        window.changyan.api.config({appid: appid, conf: conf})
      });
    }
  })();

}

function windowOnresize() {
  window.onresize = () => {
    return (() => {
      window.screenWidth = document.body.clientWidth;
      screenWidth.value = window.screenWidth;
    })();
  }
  overflowed.value = screenWidth.value <= 768;
}

</script>

<style scoped>

</style>